

<script setup>
import {onMounted, ref} from 'vue';
import {userTokenStore} from "@/store/userTokenStore.js";
import {renderGraph} from '@/api/graph.js'

import * as d3 from 'd3';
const store = userTokenStore();
const imageUrl = ref('');

const beforeUpload = (file) => {
  const isPDF = file.type === 'application/pdf';
  if (!isPDF) {
    console.error('上传的文件必须是 PDF 格式');
  }
  return isPDF;
};

const handleSuccess = (response, file, fileList) => {
  console.log('文件上传成功', response);
  // 假设响应中包含图像的 URL
  if (response.imageUrl) {
    imageUrl.value = response.imageUrl;
  }
};

const handleError = (error, file, fileList) => {
  console.error('文件上传失败', error);
};
onMounted(() => {
  const container = document.getElementById('graph-container');
  if (container) {
    // 添加延迟确保DOM完全渲染
    setTimeout(() => {
      renderGraph();
    }, 1000);
  } else {
    console.error('未找到 graph-container 元素');
  }
});
</script>
<template>
  <div class="container">
    <!-- 展示图像的区域 -->
    <el-card class="knowledge-map-card">
      <template #header>
        <div class="card-header">
          <span>知识地图</span>
        </div>
      </template>
      <div class="display-area"  id = "graph-container">
        展示区域
      </div>
      <template #footer>
        <div class="card-footer">
          <span>请在下方上传你的pdf</span>
        </div>
      </template>
    </el-card>
    <!-- PDF 上传区域 -->
    <el-upload
        class="upload-demo"
        drag
        action="/api/graph/show"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="beforeUpload"
        accept=".pdf"
        :headers="{ Authorization: store.token }"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只允许上传 PDF 文件</div>
    </el-upload>
  </div>
</template>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
}

.knowledge-map-card {
  height: 80vh;    /* 保留显式高度 */
  flex: none;      /* 禁用弹性布局分配高度 */
  margin-bottom: 20px;
}


.card-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.display-area {
  min-height: 900px; /* 设置合适的最小高度值 */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #f4f6f9;
}
.upload-demo {
  width: 300px;
  margin: 0 auto;
}
.card-footer{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>